<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-搜索</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/sanqi.css?v=0808" />
	</head>
	<style>
		.moreList{text-align: center;font-size:.72rem;color:#666;line-height:2.5rem;display: none;}
	</style>
	<body>
		<!-- 搜索 --> 
		<div class="searchIndex">
			<div class="content">
				<div class="search_input flex juscbtween">
					<img src="__TMPL__/home/public/assets/img/sanqi/search.png" alt="" class="searchImg">
					<form action="##" onsubmit="return false">
						<input type="search" id="searchInput" maxlength="100" placeholder="请输入课程名称">
					</form>
					<span id="closePage">取消</span>
				</div>
				<!-- 历史记录 -->
				<div class="history">
					<div class="flex juscbtween">
						<h3>历史记录</h3>
						<img src="__TMPL__/home/public/assets/img/sanqi/del.png" alt="" id="delHistoryList">
					</div>
					<div class="history_list flex flexWrap"></div>
				</div>

				<!-- 缺省页 -->
				<div class="empty_page hide">
					<img src="__TMPL__/home/public/assets/img/sanqi/empty.png" alt="">
					<p>暂无内容</p>
				</div>

				<!-- 搜索列表 -->
				<div class="searchList hide">
					<div class="thisList">
					</div>
					<div class="moreList">正在加载</div>
				</div>
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script>
		$(function(){
			getHistoryList();
			$('#searchInput').focus();
			var key;

			$('#searchInput').keypress(function(e){
		        key = $('#searchInput').val();
		        if(e.keyCode === 13) {
				    $('.thisList').html(' ');
				    $('.moreList').hide();
		        	getSearchList(key);
		        }
		    })

        	function getSearchList(key){
			    $('.history').hide();
			    $.ajax({
			      	url: '/seek',
			      	type: 'post',
			      	data: {
			        	"title": key,
			        	"limit":10
			      	},
			      	success: function success(d) {
			      		if(d.code == 0){
				      		if(d.data.course_list&&d.data.course_list.length>0){
			      				$('.searchList').show();
			      				$('.empty_page').hide();
				      			var htm = '';
				      			for(let i=0;i<d.data.course_list.length;i++){
				      				const item = d.data.course_list[i];
				      				htm += `
										<a href="./course_details?course_id=`+item.id+`&invite_code=`+d.data.invite+`" class="curriculum_item">
											<div class="searchItem flex alitemCenter">
												<div class="left">
													<img src="`+item.tj_logo+`" alt="">
												</div>
												<div class="right flex flexdirection juscbtweenOnly">
													<h3>`+characterLength(item.title,25)+`</h3>
													<div class="typeList flex flexWrap alitemCenter">`;
													for(let o=0;o<item.label.length;o++){
														htm += `<span>`+item.label[o].label+`</span>`;
													}
												htm += `</div>
													<p><b><i>￥</i>`+item.sell_money+`</b><span>￥`+item.original_money+`</span></p>
												</div>
											</div>
										</a>`;
				      			}
				      			$('.thisList').html(htm);
				      		}else{
			      				$('.empty_page').show();
				      		}
			      		}
			      	},
			      	error: function error(e) {
			        	console.log(e);
			      	}
			    })
			}

		    //上拉加载
		    var pageNum = 2;
			$(window).scroll(function () {
			    //滚动条滚动时调用
			    var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度
			    var scrollHeight = $(document).height(); //当前页面的总高度
			    var windowHeight = $(this).height(); //当前window的高度
				var id = $('.curriculum_tab .on').attr('value') || '';
				var age = $('.sousuo').attr('value') || '';
				console.log(id)
			    if (scrollTop+3 + windowHeight >= scrollHeight) {
			    	$('.moreList').show();
			    	pageNum += 1;
				    $.ajax({
				      	url: '/seek',
				      	type: 'post',
				      	data: {
				      		'page':pageNum,
				        	"title": key,
				        	"limit":5
				      	},
				      	success: function success(d) {
				      		if(d.code == 0){
				      			if(d.data.course_list&&d.data.course_list.length>0){
					      			var htm = '';
					      			for(let i=0;i<d.data.course_list.length;i++){
					      				const item2 = d.data.course_list[i];
					      				htm += `
											<a href="./course_details?course_id=`+item2.id+`&invite_code=`+d.data.invite+`" class="curriculum_item">
												<div class="searchItem flex alitemCenter">
													<div class="left">
														<img src="`+item2.tj_logo+`" alt="">
													</div>
													<div class="right flex flexdirection juscbtweenOnly">
														<h3>`+characterLength(item2.title,25)+`</h3>
														<div class="typeList flex flexWrap alitemCenter">`;
														for(let o=0;o<item2.label.length;o++){
															htm += `<span>`+item2.label[o].label+`</span>`;
														}
													htm += `</div>
														<p><b><i>￥</i>`+item2.sell_money+`</b><span>￥`+item2.original_money+`</span></p>
													</div>
												</div>
											</a>`;
					      			}
					      			$('.thisList').append(htm);
					      		}else{
				      				$('.moreList').html('没有更多了')
					      		}
				      		}
				      	},
				      	error: function error(e) {
				        	console.log(e);
				      	}
				    })
			    }
			});

			function getHistoryList(){
			    $.ajax({
			      	url: '/seek_history',
			      	type: 'post',
			      	data: { },
			      	success: function success(d) {
			      		if(d.code == 0){
			      			$('.history_list').html(' ');
				      		if(d.data){
				      			var htm = '';
				      			for(let i=0;i<d.data.length;i++){
				      				const item1 = d.data[i];
				      				htm += `<span>`+item1.name+`</span>`;
				      			}
				      			$('.history_list').html(htm);
				      		}
			      		}
			      	},
			      	error: function error(e) {
			        	console.log(e);
			      	}
			    })
			}

			$('.history_list').on('click','span',function(){
				key = $(this).text();
				$('#searchInput').val(key);
				getSearchList(key);
			})

			//取消
			$('#closePage').click(function(){
				window.history.go(-1);
			})

			//删除历史记录
			$('#delHistoryList').click(function(){
			    $.ajax({
			      	url: '/del_seek',
			      	type: 'post',
			      	data: { },
			      	success: function success(d) {
			      		if(d.code == 0){
			      			layer.msg('清除成功!')
			      			getHistoryList();
			      		}
			      	},
			      	error: function error(e) {
			        	console.log(e);
			      	}
			    })
			})

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }
		})
	</script>
</html>
